<template>
  <div class="load">
    <div class="title">面经登录</div>

    <div class="username">
      <div class="msg">用户名</div>
      <input type="text" placeholder="用户名" v-model="username" />
    </div>

    <div class="password">
      <div class="msg">密码</div>
      <input type="text" placeholder="密码" v-model="password" />
    </div>

    <button class="btn" @click="log">登录</button>
    <div class="tip" @click="go">注册账号</div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    go() {
      this.$router.push("/register");
    },
    async log() {
      if (!this.username && !this.password) {
        alert("用户名或密码不能为空");
      }
      try {
        const res = await axios({
          url: "http://interview-api-t.itheima.net/h5/user/login",
          method: "post",
          headers: { "Content-Type": "application/json" },
          data: {
            username: this.username,
            password: this.password,
          },
        });
        if (res.data.code === 10000) {
          alert("登录成功");
          //   console.log(res.data);
          localStorage.setItem("token", res.data.data.token);
          this.$router.push("/home");
        }
      } catch (e) {
        alert(e.response.data.message);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.load {
  padding: 10px;
  .title {
    text-align: center;
    height: 50px;
    line-height: 40px;
    font-size: 16px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
    margin-bottom: 10px;
  }
  .username {
    display: flex;
    justify-content: space-between;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
    .msg {
      font-size: 14px;
      width: 60px;
      text-align: left;
    }
    input {
      flex: 1;
      border: 0px;
      outline: none;
    }
  }
  .password {
    display: flex;
    justify-content: space-between;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
    .msg {
      font-size: 14px;
      width: 60px;
      text-align: left;
    }
    input {
      flex: 1;
      border: 0px;
      outline: none;
    }
  }
  .btn {
    width: 100%;
    height: 40px;
    color: #fff;
    background-color: #fa6d1d;
    border: none;
    margin-bottom: 10px;
  }

  .tip {
    text-align: right;
    font-size: 12px;
    color: #1271a0;
    padding-right: 10px;
    font-weight: 500;
  }
}
</style>
